$user-message: (
  header-height: getCssVar('height-control', 'large')
);

@include b(user-message) {
  width: 100%;
  height: 100%;

  @include flex(row, center, center);

  @include e(image){
    width: calc(getCssVar('width-icon', 'extra-large') + 4px);
    height: calc(getCssVar('width-icon', 'extra-large') + 4px);
    cursor: pointer;
  }

  @include e(badge){
    .el-badge__content{
      top: getCssVar('spacing', 'extra-tight');
      right: getCssVar('spacing', 'base');
      border-width: getCssVar('border-thickness');
    }
  }
  
}

@include b(user-message-popover) {
  width: 500px !important;
  height: 500px !important;
  
  &.el-popover{
    padding-top: getCssVar('spacing', 'super-tight');
    padding-bottom: getCssVar('spacing', 'none');
  }
}

@include b(user-message-popover-content-box) {
  position: relative;
  height: 100%;  
}

@include b(user-message-popover-icons){
  position: absolute;
  top: 0;
  right: 0;
  line-height: getCssVar('user-message', 'header-height');
  @include set-component-css-var('user-message', $user-message);

  @include b(user-message-popover-icons-read){
    cursor: pointer;

    &:hover{
      color: getCssVar(color,primary);
    }
  }

}


@include b(user-message-popover-content) {
  display: flex;
  flex-direction: column;
  height: 100%;

  .el-tabs__content {
    flex: 1;
  }

  .el-tab-pane{
    height: 100%;
    overflow: auto;
  }
}


@include b(user-message-notice) {
  padding: getCssVar(spacing, tight);
  padding-right: getCssVar(spacing, base, loose);

  .el-notification__group{
    max-width: 100%;
    margin: getCssVar('spacing', 'none');
    cursor: pointer;
  }

}